<template>
  <div class="shop-comment-wrapper">
    <div class="shop-comment">
      <div class="score-part">
        <div class="score-total">
          <h2>4.2</h2>
          <h3>综合评分</h3>
          <p>高于周边 69.2% 商家</p>
        </div>
        <div class="score-detail">
          <div class="line">
            <Star :score="4.1" :size="15"></Star>
            服务态度<span>4.1</span>
          </div>
          <div class="line">
            <Star :score="4.3" :size="15"></Star>
            商品评分<span>4.3</span>
          </div>
          <p>送达时间<span>28分钟</span></p>
        </div>
      </div>

      <div class="split"></div>

      <div class="options-part">
        <div class="options-wrapper">
          <a :class="{ on: filterType === 0 }" @click="filterType = 0"
            >全部 <span>{{ comments.length }}</span></a
          >
          <a :class="{ on: filterType === 1 }" @click="filterType = 1"
            >满意 <span>{{ comments.length - unsatisfiedNum }}</span></a
          >
          <a :class="{ on: filterType === 2 }" @click="filterType = 2"
            >不满意 <span>{{ unsatisfiedNum }}</span></a
          >
        </div>
        <div class="only-content" @click="onlyContent = !onlyContent">
          <div class="check" :class="{ on: onlyContent }">
            <i class="iconfont icon-select-bold"></i>
          </div>
          <span>只看有内容的评价</span>
        </div>
      </div>

      <div class="comments-wrapper">
        <ul>
          <li
            class="comment-item"
            v-for="(comment, index) in filterdComments"
            :key="index"
          >
            <div class="avatar">
              <img :src="comment.avatar" alt="" />
            </div>
            <div class="content">
              <h3 class="name-date">
                <span class="user-name">{{ comment.username }}</span>
                <span class="date">
                  {{ new Date(comment.rateTime).toLocaleString() }}
                </span>
              </h3>
              <div class="score">
                <Star :score="comment.score"></Star>
                <span v-if="comment.deliveryTime">{{ comment.deliveryTime }}分钟</span>
              </div>
              <p class="text">{{ comment.text }}</p>
              <div class="recommend">
                <i
                  class="iconfont"
                  :class="comment.rateType ? 'icon-bad-fill' : 'icon-good-fill'"
                ></i>
                <span v-for="(recommendItem, index) in comment.recommend" :key="index">{{
                  recommendItem
                }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Star from "../../../components/Star/Star"
import { mapState } from "vuex"

import BetterScroll from "better-scroll"
export default {
  data() {
    return {
      // 标记展示哪种类型的评价, 0全部, 1满意, 2不满意
      filterType: 0,
      //是否只看有内容的评价
      onlyContent: true,
    }
  },
  computed: {
    ...mapState(["comments"]),
    unsatisfiedNum() {
      return this.comments.reduce((total, comment) => {
        return total + comment.rateType
      }, 0)
    },
    filterdComments() {
      let result = this.comments

      //如果只看满意评价
      if (this.filterType === 1) {
        result = this.comments.filter((comment) => {
          return comment.rateType === 0
        })
      }
      //如果只看不满意评价
      else if (this.filterType === 2) {
        result = this.comments.filter((comment) => {
          return comment.rateType === 1
        })
      }

      //如果只看有内容评价
      if (this.onlyContent) {
        result = result.filter((comment) => {
          return comment.text !== ""
        })
      }

      return result
    },
  },

  watch: {
    // 如果filterdComments数组有变化,那么评论列表的长度就会有变化,就要重新实例化BetterScroll
    filterdComments: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          let bs = new BetterScroll(".shop-comment-wrapper", {
            bounceTime: 300,
            disableMouse: false,
            disableTouch: false,
          })
        })
      },
    },
  },
  mounted() {
    this.$store.dispatch("getShopComments", () => {
      this.$nextTick(() => {
        let bs = new BetterScroll(".shop-comment-wrapper", {
          bounceTime: 300,
          click: true,
          disableMouse: false,
          disableTouch: false,
        })
      })
    })
  },
  components: { Star },
}
</script>

<style lang="less" scoped>
@import "../../../common/style/mixin";
.shop-comment-wrapper {
  position: absolute;
  top: 19.5rem;
  bottom: 0;
  width: 100vw;
  overflow: hidden;
}

.score-part {
  background-color: #fff;
  height: 11.8rem;
  display: flex;
  padding: 1.8rem 0;
  .score-total {
    width: 13.7rem;
    text-align: center;
    padding: 0.6rem 0;
    border-right: 0.1rem solid rgba(7, 17, 27, 0.1);
    h2 {
      margin-bottom: 0.6rem;
      line-height: 2.8rem;
      font-size: 2.4rem;
      color: #f90;
    }
    h3 {
      margin-bottom: 0.8rem;
      line-height: 1.2rem;
      font-size: 1.2rem;
      color: #07111b;
    }
    p {
      line-height: 1rem;
      font-size: 1rem;
      color: #93999f;
    }
  }
  .score-detail {
    padding: 0.6rem 0 0.6rem 3.7rem;
    .line {
      display: flex;
      font-size: 1.2rem;
      color: #07111b;
      line-height: 1.8rem;
      margin-bottom: 0.8rem;
      .star-score {
        margin-right: 0.6rem;
      }
      span {
        margin-left: 0.4rem;
        line-height: 1.8rem;
        font-size: 1.2rem;
        color: #f90;
      }
    }
    p {
      line-height: 1.8rem;
      font-size: 1.2rem;
      color: #07111b;
      margin-left: 3rem;
      span {
        margin-left: 1.2rem;
        font-size: 1.2rem;
        color: #93999f;
      }
    }
  }
}

.split {
  height: 1rem;
  .bottom-border-1px(#dbdee1);
  .top-border-1px(#dbdee1);
}

.options-part {
  background-color: #fff;
  .options-wrapper {
    display: flex;
    padding: 1.8rem 0;
    margin: 0 1.8rem;
    a {
      padding: 0.8rem 1rem;
      margin-right: 1.3rem;
      line-height: 1.6rem;
      border-radius: 0.2rem;
      font-size: 1.2rem;
      background-color: #dbdddf;
      &.on {
        background-color: @theme-color;
        color: #fff;
      }
      span {
        margin-left: 0.1rem;
        font-size: 1rem;
      }
    }
  }
  .only-content {
    display: flex;
    height: 4.9rem;
    padding: 0.5rem 1.8rem;
    line-height: 2.2rem;
    color: #93999f;
    .check {
      width: 2rem;
      height: 2rem;
      line-height: 1.8rem;
      text-align: center;
      border-radius: 50%;
      margin-left: 0.1rem;
      background-color: #93999f;
      &.on {
        background-color: @theme-color;
      }
      i {
        color: #fff;
        font-size: 1rem;
      }
    }
    span {
      font-size: 1.2rem;
      margin-left: 0.8rem;
    }
  }
}

.comments-wrapper {
  padding: 0 1.8rem;
  background-color: #fff;
  .comment-item {
    display: flex;
    padding: 1.8rem 0;
    .top-border-1px(#e6e7e8);
    &::after {
      width: 90%;
      left: 0;
      transform: translateX(-50%);
    }
    .avatar {
      margin-right: 1.2rem;
      img {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
      }
    }
    .content {
      flex: 1;
      .name-date {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.4rem;
        line-height: 1.2rem;
        .user-name {
          color: #07111b;
          font-size: 1.2rem;
        }
        .date {
          color: #93999f;
          font-size: 1.2rem;
        }
      }
      .score {
        display: flex;
        margin-bottom: 0.6rem;
        span {
          margin-left: 0.3rem;
          line-height: 1.2rem;
          font-size: 1.2rem;
          color: #93999f;
        }
      }
      .text {
        margin-bottom: 1rem;
        line-height: 1.8rem;
        color: #07111b;
        font-size: 1.3rem;
      }
      .recommend {
        margin-bottom: 0.5rem;
        i {
          margin-right: 0.5rem;
          color: #f5a100;
          font-size: 1.4rem;
          &.icon-good-fill {
            color: #f5a100;
          }
          &.icon-bad-fill {
            color: #dbdddf;
            // transform: rotate(180deg);
          }
        }
        span {
          line-height: 1.5;
          font-size: 1.2rem;
          margin-right: 0.5rem;
          padding: 0 0.5rem;
          border: 0.1rem solid rgba(7, 17, 27, 0.1);
          border-radius: 0.1rem;
          color: #93999f;
        }
      }
    }
  }
}
</style>
